<script lang="ts" setup>

import { onMounted, ref, onBeforeMount } from 'vue';

import { Search } from '@element-plus/icons-vue'
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
  },

]
const input2 = ref('')
const currentPage2 = ref(5)
const pageSize2 = ref(100)
const size = ref(10)
const background = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
const active = ref('0')
const changeAct = (val: any) => {
  active.value = val
}
const testAct = ref('0')
const changeTest = (val: any) => {
  testAct.value = val
}

</script>
<template>
  <div class="container1 container flexbox ">
    <div style="flex: 1;">

      <div class="artItem">
        <p>2024 大型设备校准培训顺利进行</p>
        <div style="justify-content: space-between;">
          <div>
            <el-icon style="margin-right: 8px;">
              <View />
            </el-icon> <span>122</span>
            <el-icon style="margin: 0 8px 0 25px;">
              <Calendar />
            </el-icon><span>2024-10-19</span>
          </div>
          <div class="lookMain">
           分享到：
          </div>
        </div>
        <div class="richcontent">
          在医学的广袤天地里，知识与技能如同鸟之双翼、车两轮，缺一不可。精湛的医学技能，不仅是医护人员攻克病魔、挽救生命的利刃
        </div>
        <div class="footerBefore">
          <router-link :to="'/article'">
            上一条：2024年大型设备校准培训                                              
                </router-link>
                <router-link :to="'/article'">
                  下一条：2024年大型设备校准培训                                              

                </router-link>
        </div>
      </div>


    </div>
    <div class="righttj">
      <p>热门培训推荐</p>
      <ul>
        <li v-for="i in 8">
          <span
            :style="i == 0 ? 'background:#FF3300;color:#fff' : i == 1 ? 'background:#FF3300;color:#fff' : i == 2 ? 'background:#FF9900;color:#fff' : ''">{{
              i }}</span>
          <div>
            2024大型设备校准培训顺利进行
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>
<style scoped lang="scss">
.container {
  background-color: #fff;
  height: calc(100% - 40px);
  margin: 20px auto;
  padding: 20px;
}

button {
  width: 120px;
  height: 36px;
  background-color: #F5F5F5;
  font-size: 16px;
  margin-right: 11px;
  cursor: pointer;
  color: #333333;
}

.on {
  background-color: #0C9397;
  color: #fff;
}

.searchHeader {
  display: flex;
  margin-bottom: 20px;
  justify-content: space-between;

  .input {
    width: 360px;
  }



  .add {
    border: 1px solid #0C9397;
    color: #0C9397;
    background-color: rgba(12, 147, 151, .1);
    margin: 0;
  }
}

.pagination {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}

.openTest {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 20px;

  button {
    margin: 0;
    border: 1px solid #0C9397;
    color: #0C9397;
    background-color: rgba(12, 147, 151, .1);
  }

  span {
    margin-right: 12px;
    color: #666;
  }

  .teston {
    background-color: #0C9397;
    color: #fff;
  }
}

.expandData {
  background: #F5F5F5;
  margin: 10px 20px;

  p {
    font-size: 16px;
    color: #666666;
    margin-top: 10px;
  }
}

.artItem {
  // padding: 0 0 22px;
  font-size: 15px;
  color: #888888;

  img {
    width: 160px;
    height: 100px;
    margin-right: 16px;
  }

  div {
    display: flex;

  }

  p {
    color: #333333;
    font-size: 18px;
    margin-bottom: 20px;
  }

  .lookMain a {
    color: #0C9397;
  }

}
.richcontent{
  margin-top: 24px;
  border-top: 1px solid #EEEEEE;
  padding: 30px 0;
  min-height: 600px;
}
.footerBefore{
  display: flex;
  justify-content: space-between;
  color: #888888;
  font-size: 16px;
}
.flexbox {
  display: flex;
  height: auto;

  .righttj {
    width: 330px;
    margin-top: 52px;
    margin-left: 25px;
    border: 1px solid #EBEBEB;
    height: 400px;

    p {
      background-color: #F5F5F5;
      color: #666666;
      height: 42px;
      line-height: 42px;
      padding-left: 16px;
    }

    ul {
      padding: 15px 16px;
    }

    li {
      display: flex;
      align-items: center;
      margin-bottom: 18px;
      font-size: 16px;
      color: #666666;

      span {
        display: block;
        margin-right: 10px;
        width: 23px;
        height: 23px;
        background: #F5F5F5;

        text-align: center;
        line-height: 23px;
      }
    }
  }

}
</style>